<template>
  <section class="task-inner">
    <div class="task-content">
      <div class="table-title">任务详细</div>
      <el-table
        row-key="key"
        class="device-table"
        highlight-current-row
        :data="taskDetail"
        :show-header="false"
        size="mini"
      >
        <el-table-column align="left" width="34%" prop="label"></el-table-column>
        <el-table-column align="right" width="66%" prop="value">
          <template slot-scope="scope">
            <div v-if="scope.row.key === 'completeTime'">
              <span>
                {{ getcompleteTimeLabel(scope.row.value) }}
              </span>
            </div>
            <div v-else-if="scope.row.key === 'hasException'">
              <span :class="scope.row.value ? 'error' : 'success'">
                {{ getLabel(scope.row.value) }}
              </span>
            </div>
            <div v-else-if="scope.row.key === 'isOvertime'">
              <span :class="scope.row.value ? 'error' : 'success'">
                {{ getOvertimeLabel(scope.row.value) }}
              </span>
            </div>
            <div v-else-if="scope.row.key === 'taskOperatorUserName'" class="isUser" @click="userClick">
              {{ scope.row.value }}
            </div>
            <div v-else class="table-right">
              {{ scope.row.value }}
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="pointList">
      <div class="poin-title">
        <div class="table-title">巡更详情</div>
      </div>
      <el-scrollbar class="poin-scrollbar">
        <div class="poin-content" v-if="taskSpotList.length !== 0">
          <el-collapse v-model="activeNames" accordion>
            <el-collapse-item v-for="(item, index) in taskSpotList" :key="index" :name="item.spotId">
              <template slot="title">
                <div class="el-collapse-item__header" @click="itemClick(item)">
                  <div class="top">
                    <span
                      class="spotLeft successBg"
                      :class="{ errorBg: item.hasException, clickBg: activeIndex === item.spotId }"
                    >
                      {{ item.spotId }}
                    </span>
                    <span class="spotCenter">
                      <span>{{ item.spotName }}</span>
                    </span>
                    <span class="spotRight">
                      <span :class="item.hasException ? 'error' : 'success'">
                        {{ getSpotLabel(item) }}
                      </span>
                      <i
                        class="el-collapse-item__arrow el-icon-caret-right"
                        :class="{ 'is-active': activeNames === item.spotId }"
                      >
                      </i>
                    </span>
                  </div>
                  <div class="bottom">{{ item.completeTime.split(' ')[0] }}</div>
                </div>
              </template>

              <div class="spotBody">
                <div v-for="(e, index) in item.taskSpotEventRelationList" :key="e.id">
                  <el-table :data="taskSpotInfo[index]" :show-header="false" row-key="key" size="mini">
                    <el-table-column prop="label" align="left" width="60px"></el-table-column>
                    <el-table-column prop="value" align="right">
                      <template slot-scope="scope">
                        <div v-if="scope.row.key === 'feedbackImage'">
                          <viewer>
                            <img v-if="e.feedbackImage" class="body-img" :src="e.feedbackImage" alt="" />
                          </viewer>
                        </div>
                        <div v-else-if="scope.row.key === 'isComplete'">
                          {{ getFeedBack(e) }}
                        </div>
                        <div v-else class="table-right">
                          {{ scope.row.value }}
                        </div>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </el-scrollbar>
    </div>
    <operator-info ref="operatorInfo" :userNo="taskInfoObj.taskOperatorUserNo"></operator-info>
  </section>
</template>
<script>
import { taskListHead, hasException, isOvertime, taskInfoHead } from '../../js/constants'
import OperatorInfo from './OperatorInfo'
export default {
  name: 'TaskInfo',
  components: { OperatorInfo },
  data () {
    return {
      taskListHead,
      taskInfoHead,
      activeItem: [],
      activeNames: '',
      activeIndex: null, // 点击某行
      controlValues: false // 是否控制activeNames
    }
  },
  props: {
    taskInfoObj: {
      type: Object,
      required: false,
      default: () => {}
    },
    taskSpotList: {
      type: Array,
      required: false,
      default: () => []
    },
    activeSpotId: {
      type: Number,
      required: false
    },
    taskCompleteState: {
      type: Number,
      required: false
    }
  },
  computed: {
    taskDetail () {
      let temp = []
      this.taskListHead.forEach(item => {
        temp.push({
          key: item.value,
          label: item.label,
          value: this.taskInfoObj[item.value]
        })
      })
      return temp
    },
    // 巡更点详情
    taskSpotInfo () {
      let tempArr = []
      let temp = []
      if (this.activeItem && this.activeItem.taskSpotEventRelationList) {
        this.activeItem.taskSpotEventRelationList.forEach((item, index) => {
          temp = []
          this.taskInfoHead.forEach(info => {
            if (info.value === 'exceptionInfo') {
              temp.push({
                key: info.value,
                label: info.label,
                value: this.activeItem.exceptionInfo
              })
            } else if (info.value === 'no') {
              temp.push({
                key: info.value,
                label: info.label,
                value: index + 1
              })
            } else {
              temp.push({
                key: info.value,
                label: info.label,
                value: item[info.value]
              })
            }
          })
          tempArr.push(temp)
        })
      }
      return tempArr
    }
  },
  watch: {
    activeSpotId (val) {
      this.activeIndex = val
      if (this.controlValues) {
        this.activeNames = val
      }
      this.taskSpotList.forEach(item => {
        if (item.spotId === val) {
          this.activeItem = item
        }
      })
    },
    taskInfoObj () {
      this.$refs.operatorInfo.close()
    }
  },
  methods: {
    userClick () {
      this.$refs.operatorInfo.open()
    },
    itemClick (item) {
      const { spotBuilding, spotId, spotFloor } = item
      this.activeIndex = spotId
      this.controlValues = false
      this.taskSpotList.forEach(item => {
        if (item.spotId === spotId) {
          this.activeItem = item
        }
      })
      this.$emit('collapseChange', spotBuilding, spotFloor, spotId)
    },
    getcompleteTimeLabel (val) {
      if (this.taskCompleteState !== 2) {
        return '--'
      } else {
        return val
      }
    },
    // 获取label
    getLabel (val) {
      // taskCompleteState: 0: 待巡检, 1: 未完成, 2: 已完成
      if (this.taskCompleteState === 0) {
        return '--'
      } else {
        return this.$base.constFormatter(hasException, val)
      }
    },
    getSpotLabel (val) {
      // isComplete 0: 未完成 1: 已完成  hasException: 0: 正常 1: 异常
      if (val.isComplete === 0) return '--'
      if (val.isComplete === 1) {
        return this.$base.constFormatter(hasException, val.hasException)
      }
    },
    getOvertimeLabel (val) {
      if (this.taskCompleteState === 0) {
        return '--'
      } else {
        return this.$base.constFormatter(isOvertime, val)
      }
    },
    getFeedBack (val) {
      if (this.taskCompleteState === 2) {
        let res = ''
        if (val.inputMode) {
          if (val.feedbackItemId === 1) {
            res = val.isComplete ? '是' : '否'
          } else if (val.feedbackItemId === 2) {
            res = val.isComplete ? '确认' : '取消'
          } else if (val.feedbackItemId === 3) {
            res = val.isComplete ? '正常' : '异常'
          }
        } else {
          res = val.feedbackInputContent
        }
        return res
      }
    }
  }
}
</script>
<style lang="scss" scoped>
// 写样式的时候写上 scoped，直接改表格的样式还不写，真的要吐血了
.task-inner {
  background: #ffffff;
  .table-title {
    text-align: center;
    height: 25px;
    line-height: 25px;
    background: #e6f1fc;
    border: 1px solid #a3d0fd;
    color: #2a71ed;
  }
  .success {
    color: #7ed321;
  }
  .error {
    color: #ff4d72;
  }
  .successBg {
    background: #7ed321;
  }
  .errorBg {
    background: #ff4d72;
  }
  .clickBg {
    background: #2a71ed;
  }
}
// 人物详情-------------
.task-content {
  padding: 0.2rem;
}
.el-table {
    // ~~~~~~~~~~~~~~~~~~
  padding-top: 0.15rem;
  color: #9191af;
  img {
    margin-bottom: -0.1rem;
  }
  & /deep/ {
    .el-table__body {
      width: 100% !important;
    }
    .is-left {
      text-align: left !important;
    }
    .is-right {
      text-align: right !important;
    }
    .cell {
      padding: 0;
    }
    .isUser {
      color: #3395ff;
      font-weight: 600;
      cursor: pointer;
    }
    .table-right {
      color: #6f6f8c;
    }
  }
}
// 巡更详情-------------
.pointList {
  /deep/ .el-scrollbar__wrap {
    overflow-x: hidden;
  }
  .poin-title {
    padding: 0 0.2rem;
  }
  .poin-scrollbar {
    height: 5.5rem;
  }
  .poin-content {
    padding: 0.15rem 0.2rem 0.2rem;
    .top {
      width: 100%;
      display: flex;
      align-items: center;
      .spotLeft {
        border-radius: 50%;
        width: 20px;
        height: 20px;
        font-weight: 600;
        text-align: center;
        color: #ffffff;
        line-height: 20px;
        position: relative;
        transform: translate(-50%);
      }
      .spotCenter {
        padding-left: 10px;
        color: #6f6f8c;
        font-size: 0.16rem;
        font-weight: 500;
      }
      .spotRight {
        margin-left: auto;
        span {
          font-weight: 500;
          font-size: 0.14rem;
        }
        .el-icon-caret-right {
          color: #6f6f8c;
        }
      }
    }
    .bottom {
      height: 18px;
      line-height: 18px;
      padding-left: 30px;
      font-size: 12px;
      color: #9191af;
    }
    .el-collapse {
      border: none;
      border-left: 2px solid rgba(0, 0, 0, 0.1);
      & /deep/ {
        .el-collapse-item__header {
          width: 100%;
          border-bottom: none;
          flex-direction: column;
          height: 60px;
          line-height: 22px;
          justify-content: center;
          align-items: flex-start;
        }
        .el-collapse-item__wrap {
          border-bottom: none;
        }
        .el-icon-arrow-right {
          display: none;
        }
      }
    }
    .spotBody {
      padding-left: 30px;
      .body-info {
        font-size: 0.12rem;
        color: #9191af;
        padding-bottom: 0.1rem;
      }
      .body-img {
        cursor: pointer;
        display: inline-block;
        width: 0.4rem;
        height: 0.4rem;
      }
    }
  }
}
</style>
